<template>
  <div class="h-full" :class="[drawerOpen ? 'w-56' : 'w-10']">
    <!--患者列表 -->
    <a-drawer
      :open="true"
      placement="left"
      :closable="false"
      :width="drawerWidth"
      class="shadow-none"
      :mask="false"
      :body-style="{ padding: 0 }"
      :get-container="false"
    >
      <div v-if="drawerOpen" class="flex flex-col h-full" :class="{ 'disabled-style': loading }">
        <div :class="[borderBottom ? 'border-b' : '']" class="flex justify-between items-center min-h-[50px]">
          <a-button type="primary" class="w-8 h-8 flex-center ml-2" @click="() => emit('refresh')">
            <BaseIcon name="SyncOutlined" />
          </a-button>
          <slot name="search"></slot>
          <a-button class="p-0 pl-2 h-6 w-10 text-left rounded-l-full border-none bg-secondary" @click="closeDrawer">
            <BaseIcon name="DoubleLeftOutlined" class="text-primary" />
          </a-button>
        </div>
        <slot name="tabRadio"></slot>
        <BaseList :data-source="patientList" :loading="loading" class="px-3 w-full" @scroll="onScroll">
          <template #renderItem="{ item }">
            <div class="py-2 px-3" :class="{ 'select-active': selectedItem?.inplsh === item.inplsh }" @click="onSelect(item)">
              <div class="flex justify-between items-center">
                <div class="text-base font-bold text-primary truncate w-16" :title="item.brName">{{ item.brName || '姓名' }}</div>
                <div class="text-grey px-1 text-center w-6">{{ item.brXb }}</div>
                <div class="w-8 flex-center"><NurseLevelIcon v-if="item.nurseLevelIcon" :icon-code="item.nurseLevelIcon" /></div>
                <RoundTag v-if="item.oprAptmArgmInfoList?.length" bg-color="#f50" class="mr-1">术</RoundTag>
                <RoundTag v-if="dayjs(item.lastDeptRegTime).isSame(dayjs(), 'day')" bg-color="#62d">新</RoundTag>
                <div class="text-primary flex-1 font-bold text-right text-base truncate">{{ item.lastBedCode || item.bedCode }}</div>
              </div>
              <div class="flex justify-between items-center pt-2">
                <a-tooltip
                  v-if="item.ryzd"
                  :title="item.ryzd.length > 8 ? (item.bws ? '(' + item.bws + ') ' : '') + item.ryzd : ''"
                  placement="bottomLeft"
                  :mouse-enter-delay="0.6"
                >
                  <div class="w-3/4 text-grey truncate">{{ item.bws ? '(' + item.bws + ')' : '' }} {{ item.ryzd }}</div>
                </a-tooltip>
                <div v-else class="w-3/4 truncate text-grey">{{ item.bws ? '(' + item.bws + ')' : '' }}无诊断</div>
                <div class="w-1/4 text-right">{{ dayjs(item[timeVal]).format('MM-DD') }}</div>
              </div>
            </div>
          </template>
        </BaseList>
      </div>
      <div v-else class="flex flex-col h-full">
        <div class="border-b h-[66px] flex items-center">
          <a-button class="p-0 pr-2 h-6 w-10 text-right rounded-r-full border-none bg-secondary" @click="openDrawer">
            <BaseIcon name="DoubleRightOutlined" class="text-primary" />
          </a-button>
        </div>
        <div class="close-list-box mt-2 p-2 flex-1 overflow-auto" @scroll="onScroll">
          <div
            v-for="(item, index) in patientList"
            :key="index"
            class="h-14 w-12 bg-blue-100 mt-2 flex items-center text-2xl justify-center font-bold rounded-sm num-box cursor-pointer"
            :class="selectedItem?.admissionCode === item?.admissionCode ? 'select-active' : 'no-bgc'"
            @click="onSelect(item)"
          >
            <template v-if="item.lastBedCode">
              <div v-if="item.lastBedCode && item.lastBedCode.length <= 3">{{ item.lastBedCode }}</div>
              <div v-else-if="item.lastBedCode && item.lastBedCode.length > 3">{{ item.lastBedCode.slice(0, 3) }}</div>
              <div v-else>-</div>
            </template>
            <template v-if="item.bedCode">
              <div v-if="item.bedCode && item.bedCode.length <= 3">{{ item.bedCode }}</div>
              <div v-else-if="item.bedCode && item.bedCode.length > 3">{{ item.bedCode.slice(0, 3) }}</div>
              <div v-else>-</div>
            </template>
          </div>
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import BaseList from '@/components/BaseList'

const emit = defineEmits(['select', 'refresh', 'scroll'])
const drawerOpen = ref(true)
const drawerWidth = ref(248)
defineProps({
  patientList: {
    type: Array,
    default: () => []
  },
  selectedItem: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  },
  searchShow: {
    type: Boolean,
    default: false
  },
  borderBottom: {
    type: Boolean,
    default: true
  },
  timeVal: {
    type: String,
    default: 'admissionTime'
  }
})
const onSelect = (item) => {
  emit('select', item)
}
// const getData = () => {
//   searchKey.value = ''

// }
// // const onSearch = () => {
// //   emit('refresh', searchKey.value)
// // }
// // const onChange = debounce(() => searchKey.value && onSearch(), 200)
const closeDrawer = () => {
  drawerOpen.value = false
  drawerWidth.value = 64
}
const openDrawer = () => {
  drawerOpen.value = true
  drawerWidth.value = 248
}
const onScroll = (e) => {
  emit('scroll', e)
}
</script>
<style lang="less" scoped>
:deep(.ant-drawer-left > .ant-drawer-content-wrapper) {
  box-shadow: none !important;
}
.close-list-box {
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}
.select-active {
  color: var(--primary-color);
  background: var(--heavy-color) !important;
  border: 1px solid var(--primary-color) !important;
}
.no-bgc {
  color: var(--primary-color);
  background: #fff !important;
  border: 1px solid #f2f0f0 !important;
}
</style>
